<template>
  <div class="container">
    <!-- 个人信息 -->
    <div class="manage-info manager">
      <div class="page-title"><p>填写店铺管理人信息</p></div>
      <group label-width="2.75rem" gutter="0.1rem" label-align="left">
        <x-input title="<i>*</i>店铺管理人姓名:" 
          placeholder="请填写管理人姓名" placeholder-align='right' 
          text-align="right"  v-model="storeManageInfo.shop_user_name"  :show-clear="false" 
        ></x-input>
        <x-input label-width="1rem" title="<i>*</i>邮箱:" 
          placeholder="请填写邮箱" placeholder-align='right' 
          text-align="right"  v-model="storeManageInfo.shop_user_email" :show-clear="false"
        ></x-input>
        <x-input label-width="1rem" title="<i>*</i>QQ:" ref="tencentNode" class="qqCheck"
          placeholder="用于联系商家群，培训对接" placeholder-align='right' :max="13" 
          text-align="right"  v-model="storeManageInfo.shop_user_qq" :show-clear="false"
        ></x-input>
        <x-input label-width="1.65rem" title="<i>*</i>联系手机:" class="phoneCheck"
          placeholder="请输入手机号码" placeholder-align='right' :max="11"
          text-align="right"  v-model="storeManageInfo.shop_user_mobile" :show-clear="false"
        ></x-input>
        <x-input label-width="2rem" title="<i>*</i>短信验证码:" :show-clear="false" 
          v-model="meassgeNum" placeholder="输入验证码" :max="6"  ref="messageNode"
          placeholder-align='left' class="weui-vcode checkCode">
          <x-button slot="right" :class="{'disabled':checkCode}"  mini :disabled="checkCode"  @click.native="sendCheckCode">{{checkCodeText}}</x-button>
        </x-input>
      </group>
      <div class="next" @click="forNextPage"><span>下一步</span></div>
    </div>
    <div class="mask" v-if="showMask"><img src="../../../assets/img/publicImg/loading.gif" alt=""></div>
  </div>
</template>

<script>
  import { Group, Cell, XInput, XButton } from 'vux';
  import Validator from '../../../utils/validator.js'
  import { sendMessageCodeApi, getStoreInfoApi, saveStoreInfoApi, getAuditStatusApi} from '../../../apis/privateApi.js'
  export default {
    components: { Group , Cell, XInput, XButton },
    data(){
      return{
        showMask:true,
        requestLockTimer:null,//请求锁定时器
        responseTimer:null,//提交锁定时器
        jumpForPageTimer:null,//跳转页面定时器
        checkCode:false,//禁用按钮
        checkCodeText:'获取验证码',//验证码文本
        storeManageInfo:{
          shop_user_name:'',//管理人姓名
          shop_user_email:'',//邮箱
          shop_user_qq:'',//QQ号码
          shop_user_mobile:'',//手机号码
        },
        btnClicked:false,
        meassgeNum:'',//验证码
        checkCodeNode:null,//验证码节点 
        checkPhoneNode:null,//验证手机号节点
        checkQqCodeNode:null//验证qq号节点
      }
    },
    created(){
      let _this = this;
      this.$navtiveUtils.checkLogin();
      window.isLogin = function(u) {
        if (u) {
          let userInfo = { user_id: u };
          window.userInfo = userInfo;
          _this.getAuditState();//判断审核状态，并决定是否跳转
          _this.getInfoFromApi();
        } else {
          that.$navtiveUtils.onLogin();
        }
      };
      if(localStorage.getItem('flushpage')){
        this.$navtiveUtils.closeWeb();
        localStorage.removeItem('flushpage');
      }
    },
    methods:{
      getAuditState(){
        let param= window.userInfo.user_id;
        getAuditStatusApi(param).then(res =>{
          this.showMask=false;//隐藏mask
          if(res.code==200){
            if( res.data && res.data.status>0 && res.data.status!=2){
              let forUrl='';
              if(window.location.hostname=='localhost'){forUrl= window.location.origin+'/views/Customer/formAudit.html';}
              else{ forUrl=window.location.origin+'/default/BusinessComeIn/views/Customer/formAudit.html'; }
              window.location.replace(forUrl);
            }
          }
        }).catch(error =>{
          this.showMask=false;//隐藏mask
        })
      },
      //获取网络端接口信息
      getInfoFromApi(){
        if(window.userInfo&&window.userInfo.user_id){
          let param=window.userInfo.user_id;
          getStoreInfoApi(param).then(res =>{
            this.showMask=false;//隐藏mask
            if(res.code==200){
              let data=res.data;
              if(data.shop_user_name || data.shop_user_mobile){
                this.storeManageInfo=Object.assign(this.storeManageInfo,data);
              }
            }
          }).catch(error =>{
            this.showMask=false;//隐藏mask
          })
        }
      },
      //下一步
      forNextPage(){
        if(!window.userInfo){
          this.$navtiveUtils.checkLogin();
          return ;
        }
        let result = this.validManageValue();
        if(result){
          if( Validator.isBlank(this.meassgeNum) || !Validator.messageCode(this.meassgeNum) || this.meassgeNum.length!=6){
            this.$vux.toast.text('请输入正确验证码!','middle');
            return false;
          };
          if(this.btnClicked){
            this.$vux.toast.text('请勿重复操作!','middle');
            return false;
          }
          let extralData={
            userId:window.userInfo.user_id,
            shopUserName:this.storeManageInfo.shop_user_name,
            shopUserEmail:this.storeManageInfo.shop_user_email,
            shopUserQq:this.storeManageInfo.shop_user_qq,
            shopUserMobile:this.storeManageInfo.shop_user_mobile,
            code:this.meassgeNum
          }
          let param=Object.assign( {}, extralData);
          this.btnClicked=true;//防止重复点击
          this.requestLockTimer=setTimeout(() =>{
            this.btnClicked=false;//防止重复点击
            this.requestLockTimer=null;
          },5000);
          saveStoreInfoApi(param).then(res =>{
            this.$vux.loading.show();
            if(res.code==200){
              this.btnClicked=false;//防止重复点击
              this.requestLockTimer=null;
              this.responseTimer=setTimeout(() =>{
                this.$vux.loading.hide();
                if(window.location.hostname=='localhost'){window.location.href = window.location.origin+'/views/Customer/brandsInfo.html'; }
                else{ window.location.href=window.location.origin+'/default/BusinessComeIn/views/Customer/brandsInfo.html'; }
              },1500);
            }
          })
        }
      },
      // 获取验证码
      sendCheckCode(){
        if(!window.userInfo){
          this.$navtiveUtils.checkLogin();
          return ;
        }
        let _this = this;
        let phoneNum = this.storeManageInfo.shop_user_mobile;
        if(Validator.isBlank(phoneNum)){
          this.$vux.toast.text('请填写手机号','middle');
          return false;
        };
        if(Validator.phoneFiled(phoneNum) && phoneNum.length==11){
          let userId = window.userInfo.user_id ;
          sendMessageCodeApi(phoneNum,userId).then(res =>{
            if(res.code==200){
              this.$vux.toast.text('验证码已发送!','middle');
              _this.cutDownTime(60);//开始倒计时60s
            }else{
              this.$vux.toast.text(`${res.message}`,'middle');
            }
          })
        }else{
          this.$vux.toast.text('请输入正确手机号码!','middle');
          return false;
        }
      },
      //倒计时
      cutDownTime(seconds){
        if(seconds>=0){
          this.checkCode=true;
          this.checkCodeText = seconds+'秒后重新发送';
          seconds--;
          setTimeout(() =>{this.cutDownTime(seconds);},1000);
        }else{
          this.checkCode=false;
          this.checkCodeText = '发送验证码';
        }
      },
      // 校验管理员值合法性
      validManageValue(){
        let result = true;
        for (let key in this.storeManageInfo) {
          this.storeManageInfo[key]=this.storeManageInfo[key].trim();
          let keyValue=this.storeManageInfo[key];
          if(!keyValue){
            let msg='';
            switch(key){
              case 'shop_user_name':
                msg='请输入管理人名称!';break;
              case 'shop_user_email':
                msg='请输入邮箱!';break;
              case 'shop_user_qq':
                msg='请输入QQ号码!';break;
              case 'shop_user_mobile':
                msg='请输入手机号码!';break;
              default:
                msg='请完善必填项!';break;
            }
            this.$vux.toast.text(`${msg}`,'middle');
            result = false;
            break;
          };
          if( key=='shop_user_email' && !Validator.emailFiled(keyValue)){
            this.$vux.toast.text('请输入合法的邮箱!','middle');
            result = false;
            break;
          }
          if( key=='shop_user_qq' && !Validator.tencentCode(keyValue) ){
            this.$vux.toast.text('请输入正确的qq号码!','middle');
            result = false;
            break;
          }
          if( key=='shop_user_mobile' && ( !Validator.phoneFiled(keyValue) || keyValue.length!=11)){
            this.$vux.toast.text('请输入合法的手机号!','middle');
            result = false;
            break;
          }
        }
        return result ;
      }
    },
    beforeDestroy(){
      window.clearTimeout(this.requestLockTimer);
      window.clearTimeout(this.responseTimer);
      window.clearTimeout(this.jumpForPageTimer);
    }
  }
</script>
<style lang="less">
html,body{
  font-size: 0.3rem;
  font-family: '微软雅黑';
}
.vux-toast,.weui-toast {
  font-size: .32rem;
  line-height: 0.4rem;
}
.weui-cell .vux-cell-value{
  color: #000;
}
.checkCode .weui-input{
  height: 0.5rem;
  line-height: 0.4rem;
  border-radius: 0.1rem;
  padding: 0 0.06rem;
  box-sizing: border-box;
}
.weui-cells .vux-x-input .weui-label{
  color: #858585;
  font-size: 0.32rem;
  i{
    display: inline-block;
    font-style: normal;;
    color: #FF930F;
    padding-right: 0.08rem;
  }
}
.weui-cells .vux-x-input .weui-btn{
  color: #09142C;
  background: rgba(255,204,76, 1);
  &.weui-btn_disabled{
    opacity: 0.4;
  }
}
</style>
<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;left: 0;
  font-size: 0.3rem;
  font-family: '微软雅黑';
  .manage-info{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;left: 0;
    z-index: 2;
    &.brands{
      animation: slidesPage  0.5s ease-in-out;
    }
  }
  .page-title{
    font-size: 0.36rem;
    line-height: 0.5rem;
    padding: 0.2rem 0.3rem;
    text-align:left;
    background: #fff;
  }
  .check{
    width: 2.4rem;
    background: #000;
  }
  .next{
    width: 3.2rem;
    height: 0.72rem;
    line-height: 0.72rem;
    text-align: center;
    margin: 3.2rem auto 0;
    color: #09142C;
    border-radius: 0.08rem;
    background:rgba(255,204,76, 1);
  }
}
@keyframes slidesPage {
  0%{
    left: 100%;z-index: 1;
  }
  100%{
    left: 0;z-index: 5;
  }
}
.mask{
  display: flex; 
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;top: 0; 
  z-index: 10;
  background: #fff;
  img{
    display: block;
    width: 100%; 
    margin-top: -1.2rem;
  }
}
</style>